<template>
    <BlogHeader/>
        <div id="article-create">
            <h3>更新文章</h3>
            <form>
                <div class="form-elem">
                    <span>标题：</span>
                    <input type="text" v-model="title" placeholder="输入标题">
                </div>
                <div class="form-elem">
                    <span>分类：</span>
                    <span v-for="category in categories" :key="category.id">
                        <!--样式也可以通过 :style 绑定-->
                        <button
                                class="category-btn"
                                :style="categoryStyle(category)"
                                @click.prevent="chooseCategory(category)">
                            {{ category.title }}
                        </button>
                    </span>
                </div>

                <div class="form-elem">
                    <span>标签：</span>
                    <input v-model="tags" type="text" placeholder="输入标签，用逗号分隔">
                </div>
                <div class="form-elem">
                    <span>正文：</span>
                    <textarea v-model="body" placeholder="输入正文" rows="20" cols="75"></textarea>
                </div>
                <div class="form-elem">
                    <span>标题图：</span>
<!--                <img v-model="avatar" alt="" class="image">-->
                </div>
                <div class="form-elem">
                    <button v-on:click.prevent="submit">提交</button>
                </div>
                <div class="form-elem">
                    <button v-on:click.prevent="deleteArticle" style="background-color: darkred">删除</button>
                </div>
            </form>
        </div>

    <BlogFooter/>

</template>


<script>
    import BlogHeader from '@/components/BlogHeader.vue'
    import BlogFooter from '@/components/BlogFooter.vue'
    import axios from 'axios';
    import authorization from '@/utils/authorization';


    export default{
        name: 'ArticleEdit',
        components: {BlogHeader, BlogFooter},
        data: function () {
            return {
                // 文章标题
                title: '',
                // 文章正文
                body: '',
                // 分类
                categories: [],
                // 选定的分类
                selectedCategory: null,
                // 标签
                tag: '',
                articleID: null,
            }
        },
        mounted(){
            // 页面初始化时获取所有分类
            axios
                .get('/api/category/')
                .then(response => this.categories = response.data);

            const that = this;
            axios
                .get('/api/article/' + that.$route.params.id + '/')
                .then(function (response){
                    const data = response.data;
                    that.title = data.title;
                    that.body = data.body;
                    that.selectedCategory = data.category;
                    that.tags = data.tags.join(',');
                    that.articleID = data.id;
                })
        },
        methods: {
             // 根据分类是否被选中，按钮的颜色发生变化
            // css 也是可以被 vue 绑定
            categoryStyle(category){
                if(this.selectedCategory !== null && category.id === this.selectedCategory.id){
                    return {
                        backgroundColor: 'black',
                    }
                }
                return {
                    backgroundColor: 'lightgrey',
                    color: 'black',
                }
            },
            // 选取分类的方法
            chooseCategory(category){
                // 如果点击已选取的分类，则将 selectedCategory 置空
                if(this.selectedCategory !== null && this.selectedCategory.id === category.id){
                    this.selectedCategory = null
                }
                else {
                    this.selectedCategory = category;
                }
            },
            // 提交
            submit(){
                const that = this;
                authorization()
                .then(function (response){
                    if(response[0]){
                        // 传给后端的数据字典
                        let data = {
                            title: that.title,
                            body: that.body,
                        };
                        // 添加分类
                        data.category_id = that.selectedCategory ? that.selectedCategory.id : null;

                        // 标签预处理
                        data.tags = that.tags
                            // 逗号分隔标签
                            .split(/[,，]/)
                            // 剔除标签首位空格
                            .map(x => x.trim())
                            // 剔除长度为零的无效标签
                            .filter(x => x.charAt(0) !=='');

                        // 将发表文章请求发送至接口
                        // 成功后前往详情页面
                        const token = localStorage.getItem('access.myblog');
                        axios
                            .put('/api/article/' + that.articleID + '/',
                              data,
                              {
                                    headers: {Authorization: 'Bearer ' + token}
                                })
                            .then(function (response) {
                                that.$router.push({name: 'ArticleDetail', params: {id: response.data.id}});
                          })
                        }
                        else {
                          alert('令牌过期，请重新登录。')
                        }
                      }
                    )
                  },
                deleteArticle() {
                if(!window.confirm('确定删除吗？')){
                    return;
                }
                const that = this;
                const token = localStorage.getItem('access.myblog');
                authorization()
                    .then(function (response) {
                            if (response[0]) {
                                axios
                                    .delete('/api/article/' + that.articleID + '/',
                                        {
                                            headers: {Authorization: 'Bearer ' + token}
                                        })
                                    .then(() => that.$router.push({name: 'Home'}))
                            }
                            else {
                                alert('令牌过期，请重新登录。')
                            }
                        }
                    )
            }
        }
    }
</script>

<style scoped>
    .category-btn {
        margin-right: 10px;
    }
    #article-create {
        text-align: center;
        font-size: large;
    }
    form {
        text-align: left;
        padding-left: 100px;
        padding-right: 10px;
    }
    .form-elem {
        padding: 10px;
    }
    input {
        height: 25px;
        padding-left: 10px;
        width: 50%;
    }
    button {
        height: 35px;
        cursor: pointer;
        border: none;
        outline: none;
        background: steelblue;
        color: whitesmoke;
        border-radius: 5px;
        width: 60px;
    }
</style>